<template>
  <div class="excel-container">
    <!-- excel 导入功能的组件 -->
    <upload-excel :beforeUpload="beforeUpload" :onSuccess="onSuccess"></upload-excel>
  </div>
</template>

<script>
import UploadExcel from '@/components/UploadExcel/index.vue'
import { batchEmployee } from '@/api/employee'
export default {
  name: 'ImportExcel',
  components: {
    UploadExcel
  },
   methods: {
    // 文件的校验函数
    beforeUpload(file) {
      console.log(file);
      // 文件大小不能超过 1M
      // 1M = 1024kb 
      // 1kb = 1024b
      const isLt1M = file.size / 1024 / 1024 < 1

      if (isLt1M) {
        // 文件大小小于 1M，表示校验通过，return true
        return true
      }

      // 文件大小不小于 1M，表示校验不通过，提示用户
      if (!isLt1M) {
        this.$message.error('文件大小不能超过1M')
      }
      // 文件大小不小于 1M，表示校验不通过，return false
      return false
    },
    // excel 文件解析成功之后会触发的回调函数
    async onSuccess({ header, results }) {
      // data 里面就是解析后的表头和表体数据
      console.log('表头数据', header);
      console.log('表体数据', results);
      // 中英文对照关系
      const relation = {
        '姓名': 'username',
        '手机号': 'mobile',
        '入职日期': 'timeOfEntry',
        '工号': 'workNumber',
        '聘用形式': 'formOfEmployment',
        '部门': 'departmentName'
      }
      // 批量添加员工
      await batchEmployee(this.transData(results, relation))
      // 提示用户
      this.$message.success('批量导入员工成功')
    },
     // 将中文 key 转换为英文 key
    transData(arr, relation) {
      // 入参 arr：转换之前的数组数据（key是中文的）
      // 入参 relation：中英文对照关系

      const transArr = []
      arr.forEach(item => {
        const obj = {}
        for (let key in item) {
          // key：中文的键，比如：'姓名'
          // enkey：英文的键，比如：'name'
          const enkey = relation[key]
          obj[enkey] = item[key]
        }
        transArr.push(obj)
      })

      console.log(transArr); // [{},{}]

      // transArr：转换之后的数据（key是英文的）
      return transArr
    }
  },
   created() {
    const arr = [
      { 
        '姓名': 'zhangsan',
        '年龄': 18
      },
      { 
        '姓名': 'lisi',
        '年龄': 19
      }
    ]
    const relation = {
      '姓名': 'name',
      '年龄': 'age'
    }

    this.transData(arr, relation)
    
   }  
}
</script>

<style lang="scss" scoped>
.excel-container{
  padding: 50px;
}
</style>